<template>
  <div class="home">
    <el-carousel :interval="2000" type="card" height="600px">
      <el-carousel-item
        v-for="item in swipeItems"
        :key="item.id"
        @click="goto(item.id)"
      >
      <h2 text="2xl" justify="center">
        {{ item.title }}
      </h2>
      <el-image :src="item.img" style="width: 800px; height: 400px" />
    </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { get } from "@/utils/request";
export default {
  name: "HomeView",
  components: {},
  data() {
    return {
      swipeItems: [],
      doctor:""
    };
  },
  mounted() {
    this.getSwipeItems();
    this.getDoctorsRecommend();
  },
  methods: {
    getSwipeItems() {
      get("/getAllNotices", {}).then((res) => {
        this.swipeItems = res.data;
        console.log(this.swipeItems);
      });
    },
    getDoctorsRecommend(){
      get("/getDoctorsRecommend").then((res) => {
        this.doctor = res.data;
        console.log(this.doctor);
      });
    },
     goto(id) {
      this.$router.push({ name: "introduce", params: { id } });
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  margin-left: 55px;
}
.news-list {
  padding: 20px;
  display: flex;
  //justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-right: 15px;
  margin-left: 15px;
  .news-item {
    width: 250px;
    margin: 20px 5px;
    .image {
      width: 100%;
      height: 200px;
      overflow: hidden;
    }
    .title {
      font-weight: bold;
      width: 100%;
      margin: 0;
      padding: 0;
      white-space: nowrap; // 强制不换行
      overflow: hidden; // 超出隐藏
      text-overflow: ellipsis; // 超出的文本显示省略号
    }
    .author {
      color: #999999;
      font-size: 12px;
      white-space: nowrap; // 强制不换行
      overflow: hidden; // 超出隐藏
      text-overflow: ellipsis; // 超出的文本显示省略号
    }
  }
}
</style>